<template>
  <div class="devices_details_phone" :class="{'show': show}">
    <div class="d_d_p_h">
      <i class="icon-Back iconfont" @click="cancle"></i>
      <i class="iconfont icon-delete_normal" @click="closeDelDialog(data)"></i>
    </div>
    <div class="d_d_p_c">
      <el-image :src="data.product_image"></el-image>
      <div class="my_devices_item_content">
        <p class="product_title"> {{data.product_title}} </p>
        <p class="order_no">{{$t('DEVICE.ORDERID')}}: {{data.order_no}}</p>
        <span class="first_type">{{data.first_type}}</span>

      </div>
    </div>
    <div  class="d_d_p_r">
      <p class="fontsize16">{{$t('DEVICE.DEVICERIGHTS')}}</p>
      <p class="fontsize14 margintop8">
        <span>{{$t('DEVICE.WARRANTYSTATUS')}}:</span>
        <span v-if="data.w_status" class="outwarranty">{{$t('DEVICE.OUTWARRANTY')}}</span>
        <span v-else class="underwarranty">{{$t('DEVICE.UNDERWARRANTY')}}</span></p>
      <p class="fontsize14"><span>{{$t('DEVICE.ORDERDATE')}}:</span><span>{{data.buy_time}}</span></p>
      <p class="fontsize14">
        <span>{{$t('DEVICE.WARRANTYDEADLINE')}}:</span>
        <span v-if="!data.estimated_warranty_deadline">{{$t('DEFAULT.LIFETIMEWARRANTY')}}</span>
        <span v-else>{{data.estimated_warranty_deadline}}</span>
      </p>
      <p class="fontsize14">
        <span>{{$t('DEVICE.WARRANTYCOVERAGE')}}:</span>
        <span  v-html="$t('DEVICE.WARRANTYCOVERAGETIP')"></span>
      </p>
    </div>
     <div  class="d_d_p_wr">
      <p  class="fontsize16">{{$t('DEVICE.WARRANTYRIGHTS')}}</p>
      <p class="warranty_benefits_item margintop8" :class="{'disabled': warranty_status == 0}">{{$t('WARRANTYGUIDE.BETATESTERONE')}}
        <i class="iconfont icon-yes_normal "></i>
        <i class="iconfont icon-no_normal "></i>
      </p>
      <p class="warranty_benefits_item" :class="{'disabled': warranty_status == 0 }">{{$t('WARRANTYGUIDE.BETATESTERTWO')}}
        <i class="iconfont icon-yes_normal "></i>
        <i class="iconfont icon-no_normal "></i>
      </p>
      <p class="warranty_benefits_item " :class="{'disabled': warranty_status == 0 || warranty_status == 2}">{{$t('WARRANTYGUIDE.BETATESTERTHREE')}}
        <i class="iconfont icon-yes_normal "></i>
        <i class="iconfont icon-no_normal "></i>
      </p>
      <a href="/warranty" v-if=" warranty_status == 0  "> <el-button type="search">{{$t('DEFAULT.LIFETIMEWARRANTY')}}</el-button>
      </a>
      <!-- <a href="/my_devices" v-else-if=" warranty_status == 1"><el-button type="search">My device</el-button></a> -->
      <a href="/warranty_active" v-else-if=" warranty_status == 2 "> <el-button type="search">{{$t('DEVICE.SUBSCRIBEEMAIL')}}</el-button> </a>
    </div>
    <Del v-show="delShow"  :show="delShow" @closeDialog="closeDelDialog"></Del>

  </div>
    
</template>

<script>
import  Del  from './del'

export default {
  props:['data', 'warranty_status', 'show'],
  mounted() {

  },
  data (){
    return {
      delShow: false
    }
  },
  components: { Del },

  methods: {
    cancle() {
      this.$emit('closeDialog')
    },
     closeDelDialog(item){
      if(item ) {
        this.del_item = item
      }
      this.delShow = !this.delShow
      if(!this.delShow){
        this.cancle()
      }
    },
  }

}
</script>

<style lang="scss">

</style>